{% extends "base.html" %}
{% block title %}碳排放预测系统{% endblock %}
{% block content %}
<div class="text-center">
    <h2>欢迎，{{ session.username }}</h2>
    <div>
        <h3>查询天气情况</h3>
        <form id="weatherForm">
            <input type="date" id="weatherDate" name="date" required>
            <input type="text" id="weatherCity" name="city" placeholder="城市" required>
            <label for="weatherSuggest">是否获取建议</label>
            <input type="checkbox" id="weatherSuggest" name="suggest">
            <button type="submit">查询天气</button>
        </form>
        <div id="weatherResult"></div>
    </div>
    <hr>
    <div>
        <h3>碳排放量数据</h3>
        <img src="{{ url_for('static', filename='result.png') }}" alt="碳排放预测结果">
        <div id="emissionData">
            <table class="table">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>实际值</th>
                        <th>预测值</th>
                        <th>误差</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in emission_data %}
                    <tr>
                        <td>{{ row.date }}</td>
                        <td>{{ row.actual_value }}</td>
                        <td>{{ row.predicted_value }}</td>
                        <td>{{ row.relative_error }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <canvas id="emissionsChart"></canvas>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetch("{{ url_for('get_emission_data') }}")
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    console.error(data.error);
                    return;
                }
                const ctx = document.getElementById('emissionsChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [
                            {
                                label: '实际值',
                                data: data.actual_values,
                                borderColor: 'rgba(75, 192, 192, 1)',
                                fill: false
                            },
                            {
                                label: '预测值',
                                data: data.predicted_values,
                                borderColor: 'rgba(153, 102, 255, 1)',
                                fill: false
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            x: { display: true },
                            y: { display: true }
                        }
                    }
                });
            })
            .catch(error => console.error('Error fetching data:', error));
    });

    document.getElementById('weatherForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const date = document.getElementById('weatherDate').value;
        const city = document.getElementById('weatherCity').value;
        const suggest = document.getElementById('weatherSuggest').checked;

        fetch(`/get_weather?date=${date}&city=${city}&suggest=${suggest}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    document.getElementById('weatherResult').innerText = `Error: ${data.error}`;
                } else {
                    let resultHtml = `
                        <p>天气：${data.weather}</p>
                        <p>温度：${data.temperature}</p>
                    `;
                    if (data.suggestions) {
                        resultHtml += `<p>建议：${data.suggestions}</p>`;
                    }
                    document.getElementById('weatherResult').innerHTML = resultHtml;
                }
            })
            .catch(error => console.error('Error fetching weather data:', error));
    });
</script>
{% endblock %}
